<template>
	<div class="main">
		<div style="width: 7.5rem;min-height: 100vh;background: #fff;">
			
	
		<scroller>
			<div class="createTeastWrap flex-h">
				<div class="toper">
					<!-- <go-back aa='../evaluation/evaluationEntry'></go-back> -->
					<headerBack></headerBack>
					<span>{{types===1?'职业兴趣测试':types===2?'职业价值观测试':types===3?'MBTI性格测试':types===4?'多元智能测试':'成长环境测试'}}</span>

				</div>
				<div class="testBoxWrap flex1">
					<div class="testWrap">
						<div class="textbox" v-if="types===1">
							<p>兴趣，指一个人力求认识、掌握某种事物，并经常参入某种活动的心理倾向，即一个人对某些事物的喜好程度。职业兴趣测试可以帮助测试者相对准确地了解自身的兴趣特点和职业特点之间的匹配关系，同时也为测评者在进行生涯决策时，提供客观的参考依据。</p>
							<p class="por">1、本测试是以霍兰德职业兴趣理论为基础，并根据中学生的实际情况与习惯用语设计而成。</p>
							<p>2、本测试共包括180道题单选题和2道打分题，完成本测试预计需要20-30分钟时间。</p>
							<p> 3、本测试结果主要包括你的职业兴趣雷达图、兴趣类型、兴趣特征、典型职业、典型专业和专家建议。</p>
							<p> 4、注意事项：答案也没有对错之分，请按照自己的想法或第一反应进行选择，而不要按照期望或者外界的要求进行选择。</p>
						</div>
						<div class="textbox" v-if="types===2">
							<p>职业价值观，每个人在选择未来专业和职业时，都有着自己的人生追求。根据每个人对代表不同价值追求的多种活动的好恶情况，来判断其主导的职业价值观类型，以及这些价值观类型与未来专业和职业的关联度。</p>
							<p class="por">1、本测试是以舒伯职业价值观理论为基础，并根据中学生的实际情况与习惯用语设计而成。</p>
							<p>2、本测试共包括60道题，每题有五个备选答案，只能选择其中一个作答，完成本测试预计需要10-15分钟时间。</p>
							<p> 3、本测试结果主要包括你的职业价值观维度表、职业价值观主要类型、特征、典型职业、典型专业和专家建议</p>
							<p> 4、注意事项：答案也没有对错之分，请按照自己的想法或第一反应进行选择，而不要按照期望或者外界的要求进行选择。</p>
						</div>
						<div class="textbox" v-if="types===3">
							<p> 性格是人对现实的态度和行为方式中比较稳定的心理特征的总和，性格无所谓好坏，但是对人的生涯决策有重要的影响。职业性格测试旨在说明性格类型与职业领域的匹配程度，却会在很大程度上决定一个人事业的成就高度以及职业的满足感。</p>
							<p class="por">1、本测试是以MBTI职业性格理论为基础，结合中学生实际情况与习惯用语设计而成。</p>
							<p>2、本测试共包括70道题，每道题两个答案，根据个人实际情况，只能选取其中一个，完成本测评预计需要10-15分钟时间。</p>
							<p>3、本测试结果主要包括你的性格类型、性格特征、典型职业、典型专业和专家建议。</p>
							<p>4、注意事项：答案也没有对错之分，请按照自己的想法或第一反应进行选择，而不要按照期望或者外界的要求进行选择。</p>
						</div>

						<div class="textbox" v-if="types===4">
							<p>多元智能，指一个人的天赋、特长及其为解决某一项任务所发挥出个人最擅长的能力的组合智能。每个人都有自己独特的天赋和特长，发现和提升这些智能将对未来选择专业、职业时提供重要的参考依据。</p>
							<p class="por"> 1、本测试是以加德纳多元智能理论为基础，并根据中学生的实际情况与习惯用语设计而成。</p>
							<p>2、本测试共包括88道题单选题，完成本测试预计需要15-20分钟时间。</p>
							<p>3、本测试结果主要包括你的多元智能雷达图、多元智能类型、特征、典型职业、典型专业和专家建议。</p>
							<p>4、注意事项：答案也没有对错之分，请按照自己的想法或第一反应进行选择，而不要按照期望或者外界的要求进行选择。</p>
						</div>

						<div class="textbox" v-if="types===5">
							<p>成长环境测试，旨在探索父母对个体早期的教养方式、家庭环境及亲子关系。家庭成长环境是一个人最先接触的一种社会关系，家庭环境的不同对未来选择专业、职业也会有很大的不同。</p>
							<p class="por"> 1、本测试是以罗伊的早期经验理论为基础，并根据中学生的实际情况与习惯用语设计而成</p>
							<p> 2、本测试共包括10道题，每题有六个备选答案，只能选择其中一个作答，完成本测试预计需要5-10分钟时间。</p>
							<p>3、本测试结果主要包括你的亲子关系类型、亲子关系特征以及与此相对应的典型职业、典型专业等。</p>
							<p> 4、注意事项：答案也没有对错之分，请按照自己的想法或第一反应进行选择，而不要按照期望或者外界的要求进行选择。</p>
						</div>
						<button class="testStart has-bottombar" @click="gosres" :style="commonJs.checkTerminal()==='ios'?'bottom: 0.8rem;':''">开始测试</button>
					</div>
				</div>
			</div>
		</scroller>
			</div>
	</div>
</template>
<script>
	import ls from 'store2';
	import headerBack from '~/components/headerBack'
	export default {
		head: {
			title: '生涯测评'
		},
		components: {
			headerBack
		},
		data() {
			return {
				types: 0,
			}
		},
		created() {
			this.types = ls.get('testTypes');

		},
		mounted: function() {
			this.$visit(this.$route.path)
		},

		methods: {
			gosres() {
				this.commonJs.gosto('testQuestion', this.types)
			}
		},


	}
</script>

<style scoped lang="less">
	.createTeastWrap {
		width: 7.5rem;
		min-height: 100vh;
		background: #fff;
		overflow: hidden;
		flex-direction: column;
		height: auto;
		.toper {
			width: 100%;
			height: 2.96rem;
			background: url('~/static/images/bg_zhiyexingqu.png') no-repeat;
			background-size: 100% 100%;
			position: relative;

			span {
				position: absolute;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px -0.2rem 0.2rem 0px rgba(204, 204, 204, 0.3);
				padding: 0.4rem 0.4rem 0.3rem;
				font-size: 0.4rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				left: 0.3rem;
				bottom: -0.25rem;
				border-top-right-radius: 0.2rem;
				border-top-left-radius: 0.2rem;
			}
		}

		.testBoxWrap {
			width: 7.5rem;
			height: 100%;

			.testWrap {
				width: 6.9rem;
				height: 98%;
				position: relative;
				background: rgba(255, 255, 255, 1);
				// background: red;
				box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
				margin: 0rem auto 0;
				z-index: 2;

				.textbox {
					width: 100%;
					height: auto;
					padding: 0.3rem 0.4rem;
					box-sizing: border-box;

					p {
						font-size: 0.24rem;
						color: rgba(102, 102, 102, 1);
						line-height: 0.4rem;
					}

					.por {
						margin-top: 0.1rem;
					}
				}

				.testStart {
					width: 4.1rem;
					height: 0.88rem;
					background: @mainColor;
					border-radius: 0.44rem;
					outline: none;
					border: none;
					line-height: 0.88rem;
					text-align: center;
					font-size: 0.34rem;

					font-weight: 600;
					color: rgba(255, 255, 255, 1);
					bottom: 0.3rem;
					display: block;
					left: 1.7rem;
					position: fixed;


				}
			}
		}


	}
</style>
